<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过渡动画</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <style>
      .list-enter-active,
      .list-leave-active {
          transition: all 1s ease;
      }

      .list-move{
          transition: transform 1s ease;
      }

      .list-enter-from,
      .list-leave-to {
          opacity: 0;
      }

  </style>
  <body>
    <div id="Application">
      <button @click="click">添加元素</button>
      <button @click="dele">删除元素</button>
      <transition-group name="list">
          <div v-for="item in items" :key="item">
              元素: {{item}}
          </div>
      </transition-group>
    </div>
  </body>

  <script>
    const App= {
      data(){
        return {
          items:[1,2,3,4,5]
        }
      },
      methods: {
        click(){
          this.items.push(this.items[this.items.length-1] + 1)
        },
        dele(){
          if(this.items.length>0){
              this.items.pop()
          }
        }
      }
    }
    Vue.createApp(App).mount("#Application")
  </script>

</html>